{% extends 'base/base.html' %}
{% load tags %}

{% block css %}
    <link href="/static/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="/static/css/plugins/bootstrap-markdown/bootstrap-markdown.min.css" rel="stylesheet">
{% endblock %}

{% block title %}ITAdmin | 批量处理(SaltStack)--添加shell脚本{% endblock %}


{% block body %}
<div class="ibox-content">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">名称<font color="red">*</font></label>
            <div class="col-sm-5"><input type="text" class="form-control" id="name" value="{{ cmd.name }}"></div>
        </div>

        <div class="hr-line-dashed"></div>


        <div class="content">
            <label class="col-sm-2 control-label">脚本内容<font color="red">*</font></label>
            <div class="column1" style="margin-top: 47px">
                <textarea id="textarea" style="width:800px; height:500px">
                </textarea>
            </div>
        </div>


        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <label class="col-sm-2 control-label">备注</label>
            <div class="col-sm-5">
                <textarea name="content" id="desc" data-provide="markdown" rows="10" class="md-input" style="resize: none; display: block;">{{ cmd.description }}</textarea>
            </div>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-5">
                <button class="btn btn-outline btn-warning dim" type="button" id="cancel_add"><i class="fa fa-warning"></i>取消</button>
                <button class="btn btn-primary dim" type="button" id="add"><i class="fa fa-check"></i>保存</button>
            </div>
        </div>
    </form>
</div>

{% endblock %}


{% block base_script %}
    <script src="/static/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/static/js/plugins/bootstrap-markdown/bootstrap-markdown.js"></script>
    <script src="/static/js/plugins/bootstrap-markdown/markdown.js"></script>
    <script src="http://cdn.bootcss.com/ace/1.3.0/ace.js"></script>
    <script src="http://cdn.bootcss.com/ace/1.3.0/ext-language_tools.js"></script>
    <script src="https://cdn.bootcss.com/ace/1.3.0/mode-powershell.js"></script>
{% endblock %}

{% block script %}
<script>
    $(document).ready(function() {

        $('#date_added').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });

        $('#date_modified').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });

    });
</script>

<script>

function inject(options, callback) {
    var load = function(path, callback) {
        var head = document.getElementsByTagName('head')[0];
        var s = document.createElement('script');

        s.src = options.baseUrl + "/" + path;
        head.appendChild(s);

        s.onload = s.onreadystatechange = function(_, isAbort) {
            if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
                s = s.onload = s.onreadystatechange = null;
                if (!isAbort)
                    callback();
            }
        };
    };
    var pending = [];
    var transform = function(el) { pending.push(el) };
    load("ace.js", function() {
        ace.config.loadModule("ace/ext/textarea", function(m) {
            transform = function(el) {
                if (!el.ace)
                    el.ace = m.transformTextarea(el, options.ace);
            };
            pending = pending.forEach(transform);
            callback && setTimeout(callback);
        });
    });
    if (options.target)
        return transform(options.target);
    window.addEventListener("click", function(e) {
        if (e.detail == 3 && e.target.localName == "textarea")
            transform(e.target);
    });
}

// Call the inject function to load the ace files.
var textAce;
inject({
    baseUrl: "/static/aceedit/",
    target: document.querySelector("textarea")
}, function () {
    // Transform the textarea on the page into an ace editor.
    textAce = document.querySelector("textarea").ace;
    textAce.setDisplaySettings(true);
    var context = "{% get_shell cmd.context %}";
    context = context.replace(/<<hh>>/g, '\n');
    textAce.setValue(context);
    textAce.setOptions({enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        showGutter: true,
        theme: 'idle_fingers',
        fontSize: 15});
});




 $(function () {

        $("#add").click(function () {
            {% if cmd.id %}
                var cmd_id = {{ cmd.id }}
            {% else %}
                var cmd_id = '';
            {% endif %}
            var desc = $('#desc').val();
            var name = $('#name').val();
            textAce = document.querySelector("textarea").ace;
            var context = textAce.getValue().replace(/\n/g,"<<hh>>");
            if (name == '') {
                swal({name:"错误!", text:"名称不可为空", type:"error"});
                return;
            }
            if (context == '') {
                swal({name:"错误!", text:"脚本内容不可为空", type:"error"});
                return;
            }

            $.post("{% url 'addshell' %}", {name: name, description: desc, cmd_id: cmd_id, context: context},function (data) {

                if (data.status == 1) {
                    swal({title:"成功!", text:"添加命令成功", type:"success"},function () {
                        location.href = "{% url 'saltcmd' %}";
                    });

                } else {
                    swal({title:"错误!", text:data.msg, type:"error"}, function () {
                        location.href = "{% url 'addshell' %}";
                    });
                }
            }, 'json');
        })
        $('#cancel').click(function () {
            location.href = "{% url 'addshell' %}";
        });
    });


</script>

{% endblock %}